<!DOCTYPE html>
<html lang="zh-CN">
<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>配置中心</title>
 <link rel="shortcut icon" href="../../resource/favicon.ico">
 <link href="../../resource/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
 <link href="../../resource/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
 <link href="../../resource/lib/datatable/css/jquery.dataTables.css" rel="stylesheet">
 <link href="../../resource/lib/datatable/css/dataTables.jqueryui.css" rel="stylesheet">
 <link href="../../resource/lib/datatable/css/jquery.dataTables_themeroller.css" rel="stylesheet">

 <link href="../../resource/css/animate.min.css" rel="stylesheet">
 <link href="../../resource/css/style.min862f.css?v=4.1.0" rel="stylesheet">

 <style>
  /* 输入框和下拉框圆角  */
  .borderRadius input {
   border-radius: 4px;
  }

  .borderRadius select {
   border-radius: 4px;
  }

 </style>

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
 <!--查询面板-->
 <div class="panel panel-default">
  <div class="ibox-form">
   <form id="clusterForm" class="form-horizontal borderRadius" role="form">
    <div class="row">
     <div class="col-sm-3">
      <div class="form-group">
       <label class="col-sm-4 control-label" for="envIdSearch">环境名称</label>
       <div class="col-sm-8">
        <select class="form-control" id="envIdSearch" name="envId">
        </select>
       </div>
      </div>
     </div>

       <div class="col-sm-3">
        <div class="form-group">
         <label class="col-sm-4 control-label" for="nameSearch">集群名称</label>
         <div class="col-sm-8">
          <select class="form-control" id="nameSearch" name="name">
          </select>
         </div>
        </div>
       </div>
    </div>
   </form>

   <!-- 保存|取消 -->
   <div class="row">
    <div class="col-sm-12">
     <div style="text-align: right">
      <button class="btn btn-primary" onclick="search()">查询</button>
      <button class="btn btn-primary" onclick="reset()">重置</button>
     </div>
    </div>
   </div>
  </div>
 </div>

 <!--表格面板-->
 <div class="row">
  <div class="col-sm-12">
   <div style="margin-bottom: 5px">
    <button type="button" id="createBtn" class="btn btn-primary" data-toggle="modal" data-target="#createModal">新增</button>
   </div>
   <div class="panel panel-default">
    <div class="panel-body">
     <table id="clusterTable"
            class="table table-condensed margin-top10" style="word-break:break-all;"></table>
    </div>
   </div>
  </div>
 </div>
</div>

<!-- 模态框 - 创建 -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
 <div class="modal-dialog" style="width: 1000px">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="createModalLabel">创建</h4>
   </div>
   <div class="modal-body">
    <form id="createForm" class="form-horizontal borderRadius" role="form">
     <div class="form-group" style="display: none">
      <label class="col-sm-4 control-label" for="envIdAdd">环境ID</label>
      <div class="col-sm-8">
       <input class="form-control" id="envIdAdd" name="envId" type="text">
      </div>
     </div>

     <div class="form-group">
      <label class="col-sm-4 control-label" for="envNameAdd">环境名称<span style="color: red;margin-left: 5px">*</span></label>
      <div class="col-sm-8">
       <input class="form-control" id="envNameAdd" name="envName" type="text" readonly>
      </div>
     </div>

       <div class="form-group">
        <label class="col-sm-4 control-label" for="nameAdd">集群名称<span style="color: red;margin-left: 5px">*</span></label>
        <div class="col-sm-8">
         <input class="form-control" id="nameAdd" name="name" placeholder="请输入集群名称" type="text" autocomplete="off">
        </div>
       </div>

       <div class="form-group">
        <label class="col-sm-4 control-label" for="descAdd">描述</label>
        <div class="col-sm-8">
         <input class="form-control" id="descAdd" name="desc" placeholder="请输入描述" type="text" autocomplete="off">
        </div>
       </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" onclick="create()">确认</button>
   </div>
  </div>
 </div>
</div>

<!-- 模态框 - 修改 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
 <div class="modal-dialog" style="width: 1000px">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="updateModalLabel">修改</h4>
   </div>
   <div class="modal-body">
    <form id="updateForm" class="form-horizontal borderRadius" role="form">
     <div class="form-group" style="display: none">
      <label class="col-sm-4 control-label" for="idModify">ID</label>
      <div class="col-sm-8">
       <input class="form-control" id="idModify" name="id" type="text" autocomplete="off">
      </div>
     </div>

     <div class="form-group">
      <label class="col-sm-4 control-label" for="envNameModify">环境名称<span style="color: red;margin-left: 5px">*</span></label>
      <div class="col-sm-8">
       <input class="form-control" id="envNameModify" name="envName" type="text" readonly>
      </div>
     </div>

       <div class="form-group">
        <label class="col-sm-4 control-label" for="nameModify">集群名称<span style="color: red;margin-left: 5px">*</span></label>
        <div class="col-sm-8">
         <input class="form-control" id="nameModify" name="name" placeholder="请输入集群名称" type="text" readonly>
        </div>
       </div>

       <div class="form-group">
        <label class="col-sm-4 control-label" for="descModify">描述</label>
        <div class="col-sm-8">
         <input class="form-control" id="descModify" name="desc" placeholder="请输入描述" type="text">
        </div>
       </div>
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" onclick="update()">确认</button>
   </div>
  </div>
 </div>
</div>

<script>
 let configCenterServer = sessionStorage.getItem('configCenterServer');
 let searchUrl = configCenterServer+"/api/common/cluster/list-page";
 let createUrl = configCenterServer+"/api/common/cluster/create";
 let deleteUrl = configCenterServer+"/api/common/cluster/delete";
 let updateUrl = configCenterServer+"/api/common/cluster/update";
 let searchAllEnvUrl = configCenterServer+"/api/common/env/list-all";
 let searchAllByEnvUrl = configCenterServer+"/api/common/cluster/list";
</script>

<script src="../../resource/js/jquery.min.js?v=2.1.4"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.6"></script>
<script src="../../resource/lib/datatable/js/jquery.dataTables.min.js"></script>
<script src="../../resource/lib/axios/axios.min.js"></script>
<script src="../../resource/js/formPublic.js"></script>
<script src="../../resource/js/common.js"></script>
<script src="cluster.js"></script>
</body>
</html>
